<template>
  <view class="content">
    <!-- 导航 -->
    <search
      bgC="#ffffff"
      @click.native="goToSearchPage"
      :itemStyle="SearchContent.style"
      :params="SearchContent.params"
    ></search>
    <!-- 自定义公告 -->
    <uni-notice-bar
      :text="NoticeList.params.text"
      scrollable
      singlevvv
      showIcon
      :style="{ backgroundColor: `${NoticeList.style.background}` }"
    ></uni-notice-bar>
    <!-- 轮播图 -->
    <view>
      <swiper
        class="swiper"
        circular
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item v-for="(item, index) in SwiperList" :key="index">
          <image :src="item.imgUrl" />
        </swiper-item>
      </swiper>
    </view>
    <!-- gird宫格nav -->
    <uni-grid :column="5" :highlight="true" :showBorder="false" :square="false">
      <uni-grid-item
        v-for="(item, index) in navList"
        :index="index"
        :key="index"
      >
        <view class="grid-item-box" style="background-color: #fff">
          <image :src="item.imgUrl" />
          <text class="text">{{ item.text }}</text>
        </view>
      </uni-grid-item>
    </uni-grid>
    <!-- 视频 -->
    <video
      :style="videoList.style"
      :src="videoList.params.videoUrl"
      :autoplay="!!videoList.params.autoplay"
      :poster="videoList.params.poster"
    />
    <!-- 图片 -->
    <view class="picOne">
      <view class="OneLeft">
        <!-- 模板字串 -->
        <!-- <image :src="`${picWindow[0].imgUrl}`" /> -->
        <image :src="picWindow[0].imgUrl" />
      </view>
      <view class="OneRight">
        <view class="right-top">
          <image :src="picWindow[1].imgUrl" />
        </view>
        <view class="right-bottom">
          <view class="right-bone">
            <image :src="picWindow[2].imgUrl" />
          </view>
          <view class="right-btwo">
            <image :src="picWindow[3].imgUrl" />
          </view>
        </view>
      </view>
    </view>
    <view class="pic_item">
      <uni-grid
        :column="goodsList.style.column"
        :style="{ background: `${goodsList.style.background}` }"
        :square="false"
        :showBorder="false"
      >
        <uni-grid-item v-for="(item, index) in goodsList.data" :key="index">
          <view class="grid-item-box" style="background-color: #fff">
            <view class="imgBox">
              <image :src="item.goods_image"></image>
            </view>
            <text class="text">{{ item.goods_name }}</text>
            <text style="color: red">￥{{ item.goods_price_max }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
    <!-- 文章组 -->
    <view class="article">
      <view class="left-article">
        <view class="left-article-top">中国联通</view>
        <view class="left-article-bottom">10</view>
      </view>
      <view class="right-article">图片</view>
    </view>
    <!-- 图片 -->
    <view class="pic-one">
      <image
        :src="imageList.data[0].imgUrl"
        mode="scaleToFill"
        :style="{ backgroundColor: `${imageList.style.background}` }"
      />
    </view>
  </view>
</template>

<script>
import Search from "../../components/search.vue";
import http from "../../untils/request";
export default {
  components: { Search },
  data() {
    return {
      // 是否显示面板指示点
      indicatorDots: true,
      // 是否自动切换
      autoplay: true,
      // 自动切换时间间隔
      interval: 3000,
      duration: 500,
      // 公告
      NoticeList: {},
      //列表数据
      SwiperList: [],
      // 搜索
      SearchContent: {},
      // 导航组
      navList: [],
      // 视频
      videoList: {},
      // 图片橱窗
      picWindow: [],
      // 商品
      goodsList: {},
      // 文章
      ArticleList: {},
      // 图片
      imageList: [],
    };
  },
  onLoad() {
    this.getSwiperList();
  },
  methods: {
    //搜索跳转
    goToSearchPage() {
      uni.navigateTo({
        url: "/pages_sub1/search/search",
      });
    },
    async getSwiperList() {
      const {
        data: {
          pageData: { items },
        },
      } = await this.$http.get("/page/detail");
      console.log(items);
      // 1:提示错误
      // 2:遍历
      items.forEach((item) => {
        if (item.type === "banner") {
          this.SwiperList = item.data;
        }
        if (item.type == "navBar") {
          this.navList = item.data;
          // console.log("??????", this.navList);
        }
        // 搜索
        if (item.type === "search") {
          this.SearchContent = item;
          console.log("@@@@@@@@@@@@@@@", this.SearchContent);
        }
        // 公告
        if (item.type === "notice") {
          this.NoticeList = item;
          // console.log("------------?-", this.NoticeList);
        }
        //  视频
        if (item.type === "video") {
          this.videoList = item;
          // console.log("=====", this.videoList);
        }
        // 四张图片
        if (item.type === "window") {
          this.picWindow = item.data;
          // console.log(this.picWindow);
        }
        // 商品组
        if (item.type === "goods") {
          this.goodsList = item;
          // console.log("--------", this.goodsList);
        }
        // 文章组
        if (item.type === "article") {
          this.ArticleList = item;
          // console.log("dasdpad", this.ArticleList);
        }
        // 一张图片
        if (item.type === "image") {
          this.imageList = item;
          // console.log("dasds============dpad", this.imageList);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  height: 375rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
// grid宫格
.text {
  font-size: 26rpx;
  margin-top: 4rpx;
}
.grid-item-box {
  margin: 6rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15rpx 0;
}
image {
  height: 88rpx;
  width: 88rpx;
}
// 视频
video {
  width: 100%;
}
// 图片1
.picOne {
  height: 376rpx;
  display: flex;
  .OneLeft {
    image {
      height: 376rpx;
      width: 376rpx;
    }
    width: 50%;
  }
  .OneRight {
    width: 50%;
    .right-top image {
      width: 100%;
      height: 188rpx;
      // 中间有个白色间距 用display:block
      display: block;
    }
    .right-bottom {
      display: flex;
      .right-bone,
      .right-btwo,
      image {
        height: 188rpx;
        width: 100%;
        background-color: antiquewhite;
      }
    }
  }
}
// 图片组
.pic_item {
  background-color: red;
  .grid-item-box {
    padding: 6rpx 0;
    .imgBox {
      position: relative;
      width: 100%;
      padding-bottom: 100%;
      image {
        position: absolute;
        height: 100%;
        width: 100%;
      }
    }
    .text {
      height: 70rpx;
      font-size: 28rpx;
      display: -webkit-box;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-align: left;
    }
  }
}
//文章组
.article {
  width: 100%;
  height: 180rpx;
  background-color: red;
  display: flex;
  justify-content: space-evenly;
  .left-article {
    background-color: blue;
    height: 100%;
    width: 420rpx;
    background-color: pink;
  }
  .right-article {
    background-color: rgb(241, 171, 184);
    width: 240rpx;
    height: 96rpx;
  }
}
// 一张图片
.pic-one {
  image {
    width: 100%;
    height: 100%;
  }
  height: 750rpx;
}
</style>
